<template>
  
   
<div class="main">

  
	 <van-row type="flex" justify="center" class="img">
        <van-col span="1"></van-col>
        <van-col span="22">
          <img src />
        </van-col>
        <van-col span="1"></van-col>
      </van-row>

      <div ref="form" :model="form" :rules="rules">
        <van-row type="flex" justify="center" class="inMsg">
          <van-col span="3"></van-col>
          <van-col span="18">
            <van-cell-group>
              <van-field
                placeholder="请输入用户名"
                type="text"
                v-model="username"
                prop="username"
                left-icon="manager"
              />

              <van-field
                placeholder="请输入密码"
                type="password"
                v-model="password"
                prop="password"
                left-icon="lock"
              />

              <van-col span="3"></van-col>

      
              <van-button class="logBtn" type="primary" @click.native="submitForm" size="large">注册</van-button>
            </van-cell-group>
          </van-col>
          <van-col span="3"></van-col>
        </van-row>
      </div>




</div>
</template>

<script>
import usersApi from "@/api/usersApi"; //引入接口

export default {
  data() {
    return {
     form: {
        username: "",
        password: "",
        checked: false
      },
      username: "",
	  password: "",
	   rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
        ]
      }
    };
  },

  components: {},
created () {
	this.$nextTick(function(){
		//this.initData()	;
	})
},
  methods: {
	submitForm: async function(e, username, password) {
      console.log(111111);
       username=this.username;
      password=this.password;
      console.log(e, username, password);
      if (username == "") {
        this.$toast("用户名不能为空");
        return false;
      }
      if (password == "") {
        this.$toast("密码不能为空");
        return false;
      } else {
        // this.$toast('token='+token);
        var that = this; // 放置指针，便于then操作的获取

        try {
          let p = await usersApi.reg(
              this.username,
              this.password
			);
			console.log(p);
			
            if (p.data.flag) {
              this.$toast({
                message: "注册成功",
                type: "success"
              });
              this.$router.push({
                path: "/login"
              });
            } else {
              this.$toast({
                message: "注册失败",
                type: "error"
              });
            }
         
          
        } catch (err) {
          alert("错误");
        }

        // e.preventDefault();
      }

      // 登录按钮点击

      // this.$refs[formName].validate(async valid => {
      //   if (valid) {
      //     //验证通过，可以发送请求
      //     try {
      //        let password = this.password;
      //       let p = await usersApi.login(this.username,password);
      //       if (p.data.flag) {
      //         //登陆成功:把token和用户信息存到本地(cookie)，跳转到首页
      //         this.$toast('登录成功');
      //         //存储token和用户信息到本地
      //         let userinf = {
      //           username: this.form.username,
      //           uid: p.data.uid
      //         };
      //         console.log(userinf);
      //         if (this.form.checked) {
      //           //需要保持7天
      //           setToken(p.data.token, 7);
      //           setUser(JSON.stringify(userinf), 7);
      //         } else {
      //           //存成会话级别:关掉浏览器就删除
      //           setToken(p.data.token);
      //           setUser(JSON.stringify(userinf));
      //         }

      //         //跳转到首页
      //         this.$router.push("/home");
      //       } else {
      //         //登陆失败
      //          this.$toast('登录失败');
      //       }
      //     } catch (err) {}
      //   } else {
      //     // console.log("error submit!!");
      //    this.$toast('无法登录');
      //     return false;
      //   }
      // });
      //  componements.footerNav[3].path="/mine";

      // this.$toast('登录成功');

      //跳转到home
      // this.$router.push("/home");
    },

  
  }
};
</script>

<style scoped>
.login_msg .inMsg {
  height: 42px;
  line-height: 20px;
  background-color: #f5f5f5;
  border: 1px solid #f5f5f5;
  border-radius: 21px;
  padding: 12px 40px 12px 10px;
  width: 100%;
  font-size: 14px;
}

.logBtn {
  width: 100%;
  height: 42px;
  line-height: 42px;
  background-image: linear-gradient(-90deg, #f00 0, #ff3264 100%);
  border: 0;
  border-radius: 21px;
  font-size: 16px;
}
</style>